<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="webjs/jquery.min.js"></script>
    <script src="webjs/jquery.fullPage.min.js"></script>
    <link rel="stylesheet" href="webcss/jquery.fullPage.css">
    <link rel="stylesheet" href="webcss/reset.css">
    <link rel="stylesheet" href="webcss/layout.css">
    <title>dxysd</title>
</head>
<body>
    <header class="header">
        <h1 class="logo v-align"><img class="white-logo" src="webimages/cimg01.png" alt="" /><img class="colorful-logo" src="webimages/cimg06.png" alt="" /></h1>
        <nav class="nav v-align" id="menu">
            <a data-menuanchor="index" href="#index">首页</a>
            <a data-menuanchor="product" href="#product">产品介绍</a>
            <a data-menuanchor="operate" href="#operate">操作流程</a>
            <a data-menuanchor="problem" href="#problem">常见问题</a>
            <a data-menuanchor="contact" href="#contact">联系我们</a>
        </nav>
    </header>
    <article id="fullpage">
        <section class="section first-page">
            <div class="first-info transition">
                <h2 class="title"><span>医贷一路</span><span>医路畅行</span></h2>
                <h3 class="sub-title">我们专注于医疗消费贷款</h3>
                <h4 class="other-text">利息<span class="low"><img class="block-img" src="webimages/cimg04.png" alt="" /></span>放款<span class="fast"><img class="block-img" src="webimages/cimg05.png" alt="" /></span></h4>
            </div>
            <div class="first-img transition">
                <img class="block-img" src="webimages/cimg03.png" alt="" />
                <img class="bee" src="webimages/cimg02.png" alt="" />
            </div>
        </section>
        <section class="section second-page">
            <div class="bg"></div>
            <ul class="product a-align clearfix">
                <li>
                    <img src="webimages/cimg07.png" alt="专" />
                    <h3 class="title">专属额度</h3>
                    <p class="text">指定医院的指定消费</p>
                </li>
                <li>
                    <img src="webimages/cimg08.png" alt="快" />
                    <h3 class="title">速度快</h3>
                    <p class="text">1分钟审核最快5分钟下额度</p>
                </li>
                <li>
                    <img src="webimages/cimg09.png" alt="简" />
                    <h3 class="title">流程简单</h3>
                    <p class="text">纯线上操作，无需面签</p>
                </li>
            </ul>
        </section>
        <section class="section third-page">
            <div class="bg"></div>
            <div class="web a-align clearfix">
                <div class="operate clearfix transition">
                    <ul class="operate-list clearfix">
                        <li><img class="block-img" src="webimages/cimg04.jpg" alt="" /></li>
                        <li><img class="block-img" src="webimages/cimg05.jpg" alt="" /></li>
                        <li><img class="block-img" src="webimages/cimg03.jpg" alt="" /></li>
                    </ul>
                    <div class="operate-cont">
                        <h3 class="title">简单三步，借钱如此简单</h3>
                        <div class="text clearfix">
                            <span class="tip">申请</span>
                            <p>在线注册<br />提交申请</p>
                        </div>
                        <div class="text clearfix">
                            <span class="tip">审核</span>
                            <p>工作人员电<br>话审核材料</p>
                        </div>
                        <div class="text clearfix">
                            <span class="tip">放款</span>
                            <p>审核通过发标<br>放款快至5分钟到帐</p>
                        </div>
                    </div>
                </div>
                <div class="third-down clearfix transition">
                    <img class="logo" src="webimages/cimg14.png" alt="" />
                    <h2 class="title">医速贷APP</h2>
                    <p class="text">医速贷给您带来方便快捷的健康!</p>
                    <div class="qr-code">
                        <img class="block-img" src="webimages/cimg06.jpg" alt="">
                        <p class="tip">ios APP下载</p>
                    </div>
                    <div class="qr-code">
                        <img class="block-img" src="webimages/cimg07.jpg" alt="">
                        <p class="tip">android APP下载</p>
                    </div>
                </div>

            </div>
        </section>
        <section class="section four-page">
            <div class="problem-title">
                <p class="cn">常见问题</p>
                <p class="en">Common problem</p>
            </div>
            <ul class="problem-list transition">
                <li>
                    <h3 class="title">什么是专属额度？</h3>
                    <p class="text">专属额度是指我们的平台推出的只针对合作医院消费的额度</p>
                </li>
                <li>
                    <h3 class="title">医速贷怎么申请额度额度</h3>
                    <p class="text">您只需要四步就可以申请到额度：1.免费注册申请2.提交个人详细资料3.资质审核4.额度下放</p>
                </li>
                <li>
                    <h3 class="title">医速贷借款的利率是多少？</h3>
                    <p class="text">我们的利率不管是月息还是日息都是0.04%，您做分期后我们将不再收取利息，按照等额本息还款</p>
                </li>
            </ul>
        </section>
        <section class="section five-page fp-auto-height">
            <p class="copyright">深圳水基德升金融服务有限公司 版权所有 2012-2017</p>
        </section>
    </article>
    
    <script src="webjs/layout.js"></script>
    <script>
        $(function(){

            var inum,oTimer;
            clearInterval(oTimer);
            $('#fullpage').fullpage({
                css3: true,
                verticalCentered: false,
                anchors: ['index', 'product', 'operate', 'problem','contact'],
                menu: '#menu',
                // 页面初始完后
                afterRender: function(){
                    $('.first-info,.first-img').addClass('active');
                },
                // 滚动到某一屏后的回调函数，anchorLink 是锚链接的名称，index 是序号，从1开始计算
                afterLoad: function(anchorLink,index){
                    switch(index){
                        case 1:
                            $('.first-info,.first-img').addClass('active');
                            break;
                        case 2:
                            $('.product').addClass('active');
                            break;
                        case 3:
                            $('.header').addClass('inverse-white');
                            inum = 0;
                            operate(inum);
                            $('.operate,.third-down').addClass('active');
                            clearInterval(oTimer);
                            oTimer = setInterval(function(){
                                if(inum == 2){ 
                                    inum = 0;
                                }else{
                                    inum++;
                                }
                                operate(inum);
                            },3000);
                            $('.operate-cont .text').mouseenter(function(){
                                clearInterval(oTimer);
                            }).mouseleave(function(){
                                oTimer = setInterval(function(){
                                    if(inum == 2){ 
                                        inum = 0;
                                    }else{
                                        inum++;
                                    }
                                    operate(inum);
                                },3000);
                            });
                            break;
                        case 4:
                            $('.problem-list').addClass('active');
                            break;
                        case 5:
                            break;
                        default:
                            break;
                    }
                },
                // 滚动前的回调函数，index 是离开的“页面”的序号，从1开始计算，nextIndex 是滚动到的“页面”的序号，从1开始计算，direction 判断往上滚动还是往下滚动，值是 up 或 down
                onLeave: function(index,nextIndex,direction){
                    switch(index){
                        case 1:
                            $('.first-info,.first-img').removeClass('active');
                            break;
                        case 2:
                            $('.product').removeClass('active');
                            break;
                        case 3:
                            $('.header').removeClass('inverse-white');
                            $('.operate,.third-down').removeClass('active');
                            clearInterval(oTimer);
                            break;
                        case 4:
                            $('.problem-list').removeClass('active');
                            break;
                        case 5:
                            break;
                        default:
                            break;
                    }
                }
            });
            function operate(index){
                console.log(index);
                $('.operate-cont').find('.text').removeClass('active');
                $('.operate-list').find('li').removeClass('active');
                $('.operate-cont').find('.text').eq(index).addClass('active');
                $('.operate-list').find('li').eq(index - 1).addClass('active');
            }
            $('.operate-cont').on('click','.text',function(){
                inum = $(this).index() - 1;
                operate(inum);
            });
        });



    </script>
</body>
</html>